<template>
    <div class="app-mine__header">
        <van-uploader class="avatar" v-model="fileList" multiple :max-count="1" />
        <div class="username">
            <p v-if="!isLoggined" class="loginAndRegister">
                <RouterLink
                custom
                v-slot="{ navigate }"
                to="/login"
                >
                    <span  @click="navigate">登录/注册</span>
                </RouterLink>
            </p>
            <div v-else class="infos">
                <p>{{ authorityInfo.nickname || authorityInfo.username }}</p>
            </div>
        </div>
        <div @click="handleQuit" class="quit">退出登录</div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import useAuthorityStore from '../../../stores/authority'
import { storeToRefs } from 'pinia'
const fileList = ref([])

const authStore = useAuthorityStore()
const { quitAction } = authStore
const { isLoggined, authorityInfo } = storeToRefs(authStore)
const handleQuit = () => {
  authStore.$reset()
  quitAction()
  isLoggined.value = !isLoggined
}
</script>
<style lang="scss">
.app-mine__header{
    width: 100%;
    height: 2.2rem;
    background-color: rgb(243, 125, 15);
    padding: 10PX;
    display: flex;
    .username{
        color: #fff;
        margin: auto 10px;
        font-size: 20px;
        width: 100px!important;
        .loginAndRegister{
            width: 100%;
        }
    }
    .quit{
        width: 100px;
        margin-left: 60px;
        color: #fff;
    }
    
}
</style>